<template>
  <Layout>
    <div>
      <el-card
        shadow="never"
        style="
          min-height: 400px;
          margin-bottom: 20px;
          padding: 0px 0px 20px 0px;
        "
      >
        <el-tabs v-model="activeTab" type="card" @tab-click="onSelect">
          <el-tab-pane
            :label="'粉丝 ' + followers.totalCount"
            name="followers"
            style="padding: 5px"
          >
            <div v-if="followers.totalCount">
              <el-row style="min-height: 200px">
                <el-col
                  :span="8"
                  v-for="({node:item}, index) in followers.edges"
                  :key="'followers' + index"
                  style="padding: 10px"
                >
                  <el-card
                    shadow="hover"
                    style="font-size: 13px; color: #606266; line-height: 20px"
                  >
                    <i class="el-icon-star-off"></i>&emsp;
                    <a
                      @click="$router.push(`/user/social/details/${item.name}`)"
                      style="text-decoration: none; cursor: pointer"
                      >{{ item.name }}</a
                    >
                    <br />
                    <i class="el-icon-message"></i>&emsp;
                    <a
                      :href="item.htmlUrl"
                      target="_blank"
                      style="text-decoration: none; cursor: pointer"
                      >TA的主页</a
                    >
                    <br />
                    <img
                      :src="item.avatar"
                      style="width: 100%; border-radius: 5px; margin-top: 5px"
                    />
                  </el-card>
                </el-col>
              </el-row>
              <div style="text-align: center; margin-top: 10px">
                <el-pagination
                  @current-change="onSelect"
                  background
                  layout="prev, pager, next"
                  :current-page.sync="follower.query.page"
                  :page-size="follower.query.pageSize"
                  :total="followers.totalCount"
                >
                </el-pagination>
              </div>
            </div>
            <div
              style="
                min-height: 300px;
                margin-bottom: 20px;
                padding: 20px 0px 20px 0px;
                text-align: center;
              "
              v-else
            >
              <font style="font-size: 30px; color: #dddddd">
                <b>(￢_￢) 没有一个粉丝</b>
              </font>
            </div>
          </el-tab-pane>

          <el-tab-pane
            :label="'关注 ' + followings.totalCount"
            name="following"
            style="padding: 5px"
          >
            <div v-if="followings.totalCount">
              <el-row style="min-height: 200px">
                <el-col
                  :span="8"
                  v-for="({node:item}, index) in followings.edges"
                  :key="'following' + index"
                  style="padding: 10px"
                >
                  <el-card
                    shadow="hover"
                    style="font-size: 13px; color: #606266; line-height: 20px"
                  >
                    <i class="el-icon-star-off"></i>&emsp;
                    <a
                      @click="$router.push(`/user/social/details/${item.name}`)"
                      style="text-decoration: none; cursor: pointer"
                      >{{ item.name }}</a
                    >
                    <br />
                    <i class="el-icon-message"></i>&emsp;
                    <a
                      :href="item.htmlUrl"
                      target="_blank"
                      style="text-decoration: none; cursor: pointer"
                      >TA的主页</a
                    >
                    <br />
                    <img
                      :src="item.avatar"
                      style="width: 100%; border-radius: 5px; margin-top: 5px"
                    />
                  </el-card>
                </el-col>
              </el-row>
              <div style="text-align: center; margin-top: 10px">
                <el-pagination
                  @current-change="onSelect"
                  background
                  layout="prev, pager, next"
                  :current-page.sync="following.query.page"
                  :page-size="following.query.pageSize"
                  :total="followings.totalCount"
                >
                </el-pagination>
              </div>
            </div>
            <div
              style="
                min-height: 300px;
                margin-bottom: 20px;
                padding: 20px 0px 20px 0px;
                text-align: center;
              "
              v-else
            >
              <font style="font-size: 30px; color: #dddddd">
                <b>(￢_￢) 还没有关注一个人</b>
              </font>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </Layout>
</template>

<page-query>
query($page: Int) {
  follower: allFollower(sortBy: "index", order: ASC,perPage: 9, page: $page) @paginate {
    totalCount
    pageInfo{
      totalPages
      currentPage
    }
    edges{
      node{
        name
        id
        avatar
      }
    }
  }
  following: allFollowing(sortBy: "index", order: ASC,perPage: 9, page: $page) @paginate {
    totalCount
    pageInfo{
      totalPages
      currentPage
    }
    edges{
      node{
        name
        id
        avatar
      }
    }
  }
}
</page-query>

<script>
export default {
  metaInfo: {
    title: 'Hello, world!'
  },
  data: function () {
    return {
      activeTab: 'following',
      searchKey: '',
      follower: {
        query: {
          pageSize: 9,
        },
      },
      following: {
        query: {
          pageSize: 9,
        },
      },
    }
  },
  methods: {
    onSelect() {
      this.$router.push(`/social/${this.following.query.page === 1 ? '' : this.following.query.page}`)
    }
  },
  computed: {
    followers() {
      return this.$page.follower
    },
    followings() {
      return this.$page.following
    }
  }
}
</script>

<style>
.home-links a {
  margin-right: 1rem;
}
</style>
